<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-50">
			<view class="flex-row justify-center items-center relative group">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796370892020948020.png" />
				<text class="text">{{tablecode}}</text>
			</view>
			<view class="flex-col section_2 space-y-31">
				<text class="self-start font_1">设备号</text>
				<view class="flex-col justify-start items-start text-wrapper"><text
						class="font_2 text_2">{{tablecode}}</text>
				</view>
			</view>
			<view class="flex-col section_2 space-y-31">
				<text class="self-start font_1">桌台类型</text>
				<view class="flex-col justify-start items-start text-wrapper">
					<text class="font_2 text_2" v-if="type==1">台球</text>
					<text class="font_2 text_2" v-if="type==2">麻将</text>
				</view>
			</view>
			<view class="flex-col section_2 space-y-31">
				<text class="self-start font_1">桌台名称</text>
				<view class="flex-col justify-start items-start text-wrapper"><text
						class="font_2 text_2">{{name}}</text>
				</view>
			</view>
			<view class="flex-col section_2 space-y-31">
				<text class="self-start font_1">规则详情</text>
				<view class="flex-col justify-start items-start text-wrapper" v-for="item in rulelist"><text
						class="font_2 text_2">{{item.f_start}}--{{item.f_end}},{{item.f_money}}元/小时</text>
				</view>
			</view>
		</view>
	
		<view class="flex-col relative group_2 space-y-556">
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3">
					<text class="font_1">桌位号</text>
				</view>
				<view class="inp">
					<view class="flex-row justify-between items-center section_5 view"
						style="width: 315px;height: 40px;">
						<u-input v-model="value1"  disabled type="text" style="width: 200px;" />
					</view>
				</view>
				<view
					style="width: 200px; height: 200px; margin: auto; margin-top: 30px;">
					<image :src="img" style="width: 100%; height: 100%;" mode="widthFix" @longtap="savePosterPath(img)">
					</image>
				</view>
			</view>
			<view class="flex-row space-x-30" style="margin-top: 10px" @click="deleteEquip">
				<view class="flex-col justify-start items-center text-wrapper_3">
					<text class="font_1 text_5">删除设备</text>
				</view>
			</view>
			<u-modal v-model="show" title="温馨提示" :show-cancel-button="true" confirm-color="#19C865"
				:title-style="{color: 'black'}" @confirm="confirm">
				<view class="slot-content">
					您要删除该设备以及设备下所有的桌位吗？
				</view>
			</u-modal>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				show1: false,
				value: '',
				value1: '',
				tablecode: '',
				eqId: '',
				img: '',
				name:'',
				type:'',
				rulelist:[],


			};
		},
		onLoad(options) {
			console.log(options)
			this.tablecode = options.table
			this.value1 = options.code
			this.eqId = options.id
			this.img = options.img
			this.name= options.name
			this.type= options.type   
			this.ruleDetail()  
			 

		},
		methods: {
			ruleDetail(){
				this.$Api.getIoInfo({
					ioId:this.eqId
				}).then(res => {
					// if (res.data.code == 0) {
					// 	uni.showToast({
					// 		icon: 'success',
					// 		title: '删除成功'
					// 	})
					// }
					this.rulelist = res.data.data.has_rule
					console.log(res, 'kankan')
				})
			},
			savePosterPath(img) {
				uni.downloadFile({
					url:img,
					success: (resFile) => {
						console.log(resFile, "resFile");
						if (resFile.statusCode === 200) {
							uni.getSetting({
								success: (res) => {
									if (!res.authSetting["scope.writePhotosAlbum"]) {
										uni.authorize({
											scope: "scope.writePhotosAlbum",
											success: () => {
												uni.saveImageToPhotosAlbum({
													filePath: resFile
														.tempFilePath,
													success: (res) => {
														return uni
															.showToast({
																title: "保存成功！",
															});
													},
													fail: (res) => {
														return uni
															.showToast({
																title: `${JSON.stringify(res.errMsg)} fail`,
															});
													},
													complete: (res) => {},
												});
											},
											fail: () => {
												uni.showModal({
													title: "您已拒绝获取相册权限",
													content: "是否进入权限管理，调整授权？",
													success: (res) => {
														if (res.confirm) {
															uni.openSetting({
																success: (
																	res
																	) => {
																	console
																		.log(
																			res
																			.authSetting
																			);
																},
															});
														} else if (res
															.cancel) {
															return uni
																.showToast({
																	title: "已取消！",
																});
														}
													},
												});
											},
										});
									} else {
										uni.saveImageToPhotosAlbum({
											filePath: resFile.tempFilePath,
											success: (res) => {
												return uni.showToast({
													title: "保存成功！",
												});
											},
											fail: (res) => {
												return uni.showToast({
													title: `${JSON.stringify(res.errMsg)} fail`,
												});
											},
											complete: (res) => {},
										});
									}
								},
								fail: (res) => {},
							});
						} else {
							return uni.showToast({
								title: `${JSON.stringify(resFile.errMsg)} fail`,
							});
						}
					},
					fail: (res) => {
						return uni.showToast({
							title: `${JSON.stringify(res.errMsg)} fail`,
						});
					},
				});
			},
			confirm() {
				console.log('0000000')
				this.$Api.delIo({
					id: this.eqId
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '删除成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)

					}
					console.log(res.data.data, 'num列表')
				})
			},
			addtable() {
				this.show1 = true;
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			deleteEquip() {
				this.show = true;

			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.slot-content {
		width: 260px;
		height: 40px;
		margin: 20px;
		text-align: center;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.btn {
		width: 60px;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #19c865;
		color: aliceblue;
		font-size: 15px;
	}

	.inp {
		display: flex;
		/* width: 330px; */
		height: 50px;
		justify-content: space-around;
		align-items: center;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 61rpx;
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 105rpx 30rpx 305rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-50>view:not(:first-child),
	.space-y-50>text:not(:first-child),
	.space-y-50>image:not(:first-child) {
		margin-top: 30rpx;
	}

	.group {
		padding: 4rpx 0;
	}

	.image {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 28rpx;
	}

	.section_2 {
		padding: 41rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.space-y-31>view:not(:first-child),
	.space-y-31>text:not(:first-child),
	.space-y-31>image:not(:first-child) {
		margin-top: 31rpx;
	}

	.font_1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #222222;
	}

	.text-wrapper {
		padding: 32rpx 0;
		background-color: #ffffff;
		border-radius: 8rpx;
		border: solid 1rpx #dddddd;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_2 {
		margin-left: 28rpx;
	}

	.group_2 {
		margin-top: -286rpx;
		padding: 0 30rpx;
	}

	.space-y-556>view:not(:first-child),
	.space-y-556>text:not(:first-child),
	.space-y-556>image:not(:first-child) {
		/* margin-top: 556rpx; */
	}

	.section_3 {
		padding: 0 30rpx 51rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_3 {
		padding: 28rpx 0 32rpx;
	}

	.section_4 {
		padding: 12rpx 14rpx;
		background-color: #19c865;
		border-radius: 8rpx;
		height: 48rpx;
	}

	.space-x-6>view:not(:first-child),
	.space-x-6>text:not(:first-child),
	.space-x-6>image:not(:first-child) {
		margin-left: 6rpx;
	}

	.image_2 {
		width: 26rpx;
		height: 26rpx;
	}

	.text_3 {
		margin-right: 3rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 23rpx;
	}

	.section_5 {
		padding: 28rpx 29rpx 32rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		border: solid 1rpx #dddddd;
	}

	.image_3 {
		width: 27rpx;
		height: 27rpx;
	}

	.view {
		margin-top: 27rpx;
	}

	.view_2 {
		margin-top: 28rpx;
	}

	.space-x-30>view:not(:first-child),
	.space-x-30>text:not(:first-child),
	.space-x-30>image:not(:first-child) {
		margin-left: 30rpx;
	}

	.text-wrapper_2 {
		padding: 30rpx 0;
		flex: 1 1 330rpx;
		background-color: #ffffff;
		border-radius: 44rpx;
		height: 88rpx;
	}

	.text_4 {
		font-weight: 700;
		line-height: 29rpx;
	}

	.text-wrapper_3 {
		padding: 30rpx 0;
		flex: 1 1 330rpx;
		background-color: #19c865;
		border-radius: 44rpx;
		height: 88rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}
</style>
